<template>
  <div class="main-container">
    <!-- <div class="tabs-lb">
      <span>操作日志</span>
    </div> -->
    <el-tabs class="tabs-div">
      <el-tab-pane label="操作日志">
        <div class="card-container" style="margin-top: 20px">
          <!-- <a-tabs hide-add type="editable-card">
        <a-tab-pane key="1" tab="日志查询"> -->
          <div class="tab-content">
            <a-form-model
              :model="form"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item label="关键字">
                <a-input v-model="form.gjz" />
              </a-form-model-item>

              <!-- <a-form-model-item label="Resources" :class="[flag?'':'active1']">
                <a-radio-group v-model="form.resource">
                  <a-radio value="1">
                    过去一分钟
                  </a-radio>
                  <a-radio value="2">
                    过去五分钟
                  </a-radio>
                  <a-radio value="3">
                    过去半小时
                  </a-radio>
                </a-radio-group>
                <span @click="flag=!flag">自定义时间</span>
              </a-form-model-item> -->

              <!-- <a-form-model-item label="选择时间" :class="[flag?'active':'']">
                <a-range-picker  v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
              </a-form-model-item> -->
              <a-form-model-item label="选择时间">
                <a-range-picker
                  v-model="form.date"
                  show-time
                  type="date"
                  style="width: 100%"
                />
              </a-form-model-item>

              <a-form-model-item label="操作类型">
                <a-select v-model="form.czlx" allowClear>
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in czlxLists"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                  <!-- <a-select-option value="修改">
                    修改
                  </a-select-option>
                  <a-select-option value="登录">
                    登录
                  </a-select-option>
                  <a-select-option value="删除">
                    删除
                  </a-select-option> -->
                </a-select>
              </a-form-model-item>

              <a-form-model-item label="日志类型">
                <a-select v-model="form.rzlx">
                  <a-select-option value="czrz"> 操作日志 </a-select-option>
                  <a-select-option value="ycrz"> 异常日志 </a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item label="单位名称">
                <a-tree-select
                  dropdownMatchSelectWidth
                  treeNodeFilterProp="title"
                  v-model="form.dwbm"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  tree-default-expand-all
                >
                  <a-tree-select-node
                    v-for="(item, index) in dwSelects"
                    :key="item.dwbm"
                    :title="item.dwmc"
                    :value="item.dwbm"
                  >
                    <a-tree-select-node
                      v-for="(el, i) in item.children"
                      :key="el.dwbm"
                      :title="el.dwmc"
                      :value="el.dwbm"
                    >
                      <a-tree-select-node
                        v-for="(ele, i1) in el.children"
                        :key="ele.dwbm"
                        :title="ele.dwmc"
                        :value="ele.dwbm"
                      >
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </a-form-model-item>

              <a-form-model-item :wrapper-col="{ span: 10, offset: 1 }">
                <a-button type="primary" @click="serch"> 查询 </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>

          <div style="padding: 10px">
            <a-table
              :columns="columns"
              :data-source="lists"
              :pagination="pagination"
              style="background: #fff"
            >
              <template slot="action" slot-scope="text, record">
                <a slot="action" href="javascript:;" style="margin-right: 4px">
                  <span class="empty-btn" @click="onEdit(text)">
                    <IconFont type="swx-icon-wenshu-wendang" />
                    详细日志
                  </span>
                </a>
              </template>
              <template slot="footer"> </template>
            </a-table>
          </div>
          <!-- </a-tab-pane>
      </a-tabs> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="调用日志">
        <div style="padding: 10px">
          <a-table
            :columns="dyrzColumns"
            :data-source="dyrzList"
            :pagination="dyrzPagination"
            style="background: #fff"
          >
          </a-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 详情日志 -->
    <a-modal
      v-model="showRzDia"
      title="详细日志"
      class="zzjg-dialog"
      :footer="null"
      centered
    >
      <table class="riginalTable" style="table-layout: fixed">
        <tr>
          <td>
            <span>日志编号</span>
          </td>
          <td>{{ rzForm.rzbh }}</td>
          <td>
            <span>日志分类</span>
          </td>
          <td>{{ rzForm.rzfl }}</td>
        </tr>
        <tr>
          <td>
            <span>操作人员编码</span>
          </td>
          <td>
            {{ rzForm.rybm }}
          </td>
          <td>
            <span>操作人员名称</span>
          </td>
          <td>
            {{ rzForm.rymc }}
          </td>
        </tr>
        <tr>
          <td>
            <span>关联资源编号</span>
          </td>
          <td>
            {{ rzForm.glzybh }}
          </td>
          <td>操作IP地址</td>
          <td>{{ rzForm.czip }}</td>
        </tr>
        <tr>
          <td>单位名称</td>
          <td>{{ rzForm.dwmc }}</td>
          <td>单位编码</td>
          <td>{{ rzForm.dwbm }}</td>
        </tr>
        <tr>
          <td>操作时间</td>
          <td>{{ rzForm.czsj }}</td>
          <td>操作类型</td>
          <td>{{ rzForm.czlx }}</td>
        </tr>
        <tr>
          <td>操作表</td>
          <td>{{ rzForm.czb }}</td>
          <td>备注</td>
          <td>{{ rzForm.bz }}</td>
        </tr>
        <tr>
          <td>
            <span>日志信息</span>
          </td>
          <td colspan="3">{{ rzForm.rzxx }}</td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>
import vuex from 'vuex'
const logininfo = vuex.createNamespacedHelpers('login')
const columns = [
  {
    title: '日志编号',
    dataIndex: 'rzbh',
    width: '10%'
  },
  {
    title: '日志信息',
    dataIndex: 'rzxx'
  },
  {
    title: '日志分类',
    dataIndex: 'rzfl',
    width: 100
  },
  {
    title: '操作类型',
    dataIndex: 'czlx',
    width: 100
  },
  {
    title: '产生时间',
    dataIndex: 'cssj',
    width: 200
  },
  {
    title: '操作',
    // dataIndex: "action",
    width: 150,
    scopedSlots: { customRender: 'action' }
  }
]
import moment from 'moment'
import 'moment/locale/zh-cn'
import service from './api/api'
import qqglService from '@/api/qqgl'
export default {
  data () {
    return {
      columns,
      flag: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      showRzDia: false,
      lists: [],
      dwSelects: [],
      // 分页
      pagination: {
        pageSize: 20, // 一页的数据限制
        current: 1, // 当前页
        total: 0, // 总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ['10', '20', '40'], // 指定每页可以显示多少条
        onShowSizeChange: (current, pagesize) => {
          // 改变 pageSize时的回调
          this.pagination.current = 1
          this.pagination.pageSize = pagesize
          this.getLists()
        },
        onChange: (current, pagesize) => {
          // 切换分页时的回调，
          this.pagination.current = current
          this.pagination.pageSize = pagesize
          this.getLists()
        },
        // 可以展示总数
        showTotal: total => `总共：${total}条`
      },
      form: {
        gjz: '',
        date: [],
        czlx: '',
        rzlx: 'czrz',
        dwbm: '',
        endTime: '',
        startTime: ''
      },
      rzForm: {},
      czlxLists: [],

      dyrzList: [],
      dyrzColumns: [
        {
          title: '接口编号',
          dataIndex: 'jkbh',
          ellipsis: true,
          width: 240
        },
        {
          title: 'AK',
          dataIndex: 'ak',
          ellipsis: true,
          width: 130
        },
        {
          title: '创建人',
          dataIndex: 'cjrymc',
          ellipsis: true,
          width: 130
        },
        {
          title: '接口名称',
          dataIndex: 'jkmc',
          ellipsis: true,
          width: 130
        },
        {
          title: '请求耗时',
          dataIndex: 'qqhs',
          ellipsis: true,
          width: 100
        },
        {
          title: '请求结果',
          dataIndex: 'qqjg',
          ellipsis: true
        },
        {
          title: '请求时间',
          dataIndex: 'qqsj',
          ellipsis: true,
          width: 250
        },
        {
          title: '请求状态',
          dataIndex: 'qqzt',
          ellipsis: true,
          width: 100
        },
        {
          title: '是否为测试请求',
          dataIndex: 'sfwcsqq',
          ellipsis: true,
          width: 160
        }
      ],
      // 分页
      dyrzPagination: {
        pageSize: 20, // 一页的数据限制
        current: 1, // 当前页
        total: 0, // 总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ['10', '20', '40'], // 指定每页可以显示多少条
        onShowSizeChange: (current, pagesize) => {
          // 改变 pageSize时的回调
          this.dyrzPagination.current = 1
          this.dyrzPagination.pageSize = pagesize
          this.queryQqjl()
        },
        onChange: (current, pagesize) => {
          // 切换分页时的回调，
          this.dyrzPagination.current = current
          this.dyrzPagination.pageSize = pagesize
          this.queryQqjl()
        },
        // 可以展示总数
        showTotal: total => `总共：${total}条`
      }
    }
  },
  created () {
    this.form.dwbm = this.personInfo.dwbm
    this.getLists()
    this.getDwSelects()
    this.getqueryLxLists()

    // 获取调用日志
    this.queryQqjl()
  },
  methods: {
    // 获取调用日志
    queryQqjl () {
      let data = {
        filter: {
          jkbh: ''
        },
        orderBy: '',
        pageNum: this.dyrzPagination.current,
        pageSize: this.dyrzPagination.pageSize
      }
      qqglService.queryQqjl(data).then(res => {
        this.dyrzList = res.list.map(item => {
          item.sfwcsqq = item.sfwcsqq == 'Y' ? '是' : '否'
          return item
        })
        this.dyrzPagination.total = res.total
      })
    },
    getqueryLxLists () {
      service.rzcx.getqueryLx().then(res => {
        this.czlxLists = res.data
      })
    },
    serch () {
      this.pagination.current = 1
      this.pagination.pageSize = 10
      let time = []
      if (this.form.date) {
        time = this.form.date.map(item => {
          return moment(item._d).format('YYYY-MM-DD HH:mm:ss')
        })
        this.form.startTime = time[0]
        this.form.endTime = time[1]
      }
      this.getLists()
    },
    getLists () {
      let data = {
        filter: {
          ...this.form
        },
        orderBy: '',
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      service.rzcx.rzcxLists(data).then(res => {
        if (res.code == 0) {
          let data = res.data
          this.lists = data.list
          this.pagination.total = data.total
        }
      })
    },
    async getDwSelects () {
      let res = await service.rzcx.getDwSelects({
        dwbm: this.personInfo.dwbm
      })
      if (res.code == 0) {
        this.dwSelects = res.data
      }
    },
    onEdit (text) {
      let data = {
        czlx: text.czlx,
        rzbh: text.rzbh
      }
      service.rzcx.getSingleRz(data).then(res => {
        if (res.code == 0) {
          this.rzForm = res.data
        }
      })
      this.showRzDia = true
    }
  },
  computed: {
    ...logininfo.mapState(['personInfo'])
  }
}
</script>

<style lang="less">
.ant-table-pagination.ant-pagination {
  text-align: center;
  float: unset;
}
</style>
<style lang="less" scoped>
@import './css/variableLess.less';
.tabs-div {
  background: #fff;
}
.main-container {
  // width: 100%;
  // height: 100%;
  width: 1540px !important;
  margin: 25px 0;
  background-color: transparent !important;
  border-radius: 5px;
}
.active {
  display: none;
}
.active1 {
  display: none;
}
.ant-tabs-bar {
  margin: 0;
}
.ant-tabs-tabpane {
  padding: 16px;
}
.tab-content {
  // border: 1px solid @borderColor-h;
  padding: 10px 40px;
  box-sizing: border-box;
  margin-bottom: 20px;
  background-color: #fff;
}
.ant-form {
  display: flex;
  flex-wrap: wrap;
  .ant-form-item {
    width: 33.33%;
  }
}
.ant-select-dropdown-menu-item-selected {
  font-weight: normal;
}
.zzjg-dialog {
  /deep/ .ant-modal {
    width: 1150px !important;
    height: 800px !important;
  }
  .dialogheader {
    height: 35px;
    background-color: #cbe2ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    padding-left: 10px;
    color: #0090ff;
  }
  .dialogcontent {
    padding: 10px;
    display: flex;
    .left {
      padding: 10px;
      box-sizing: border-box;
      width: 325px;
      height: 600px;
      border: 1px solid @borderColor-h;
      margin-right: 10px;
    }
    .right {
      width: calc(100% - 335px);
      height: 600px;
    }
  }
  .dialog {
    border: 1px solid @borderColor-h;
  }
}
// table表格滚动条
/deep/ .ant-tabs {
  height: 100%;
  overflow: visible;
  // height: calc(100% - 200px);
}
/deep/ .ant-tabs .ant-tabs-top-content,
.ant-tabs .ant-tabs-bottom-content {
  height: calc(100% - 41px) !important;
  // background: gold;
  .ant-tabs-tabpane {
    height: 100%;
  }
  .ant-table-wrapper {
    height: calc(100% - 160px);
    .ant-spin-nested-loading {
      height: 100%;
      .ant-spin-container {
        height: 100%;
        .ant-table {
          height: calc(100% - 72px);
          overflow: auto;
        }
      }
    }
  }
}
/deep/ .ant-select-selection__rendered {
  padding-left: 12px;
}
</style>
